#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>

</style>
#end

#define js()
<script type="text/javascript">
    var cTime = null;
    layui.use(['laydate', 'table', 'layer'], function () {
        var laydate = layui.laydate
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;
        //日期时间范围
        laydate.render({
            elem: '#createTime'
            , type: 'datetime'
            , range: '/'
            , format: 'yyyy-MM-dd HH:mm:ss'
            , done: function (value) {
                cTime = value;
            }
        });
        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , id: 'dateTable'
            , even: true //开启隔行背景
            , size: 'sm' //小尺寸的表格
            , height: 'full-150'    //容器高度
            , cellMinWidth: 60       //单元格最小宽度
            , cols: [[               //标题栏
                {type: 'numbers', title: '序号'}
                , {field: 'title', title: '标题', minWidth: 250,sort: true}
                , {field: 'type', title: '类型', width: 150,sort: true,
                    templet: '#statusTpl(io.jboot.admin.service.entity.status.system.NewsType::me(), "type")'}
                , {field: 'source', title: '来源', minWidth: 150,sort: true}
                , {field: 'editer', title: '编辑', minWidth: 150,sort: true}
                , {field: 'createUserID', title: '创建用户', minWidth: 150,sort: true}
                , {field: 'createTime', title: '创建时间', width: 150, sort: true}
                , {field: 'lastUpdateUserID', title: '更新用户', minWidth: 150,  sort: true}
                , {field: 'lastAccessTime', title: '访问日期', width: 150,  sort: true}
                , {
                    field: 'isPublish', title: '目标群体', width: 150,sort: true,
                    templet: '#statusTpl(io.jboot.admin.service.entity.status.system.PublicStatus::ps(), "isPublish")'
                }
                , {fixed: 'right', title: '操作', minWidth: 180, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , url: '#(ctxPath)/app/news/tableData'
            , method: 'get'
            , request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
            , done: function (res, curr, count) {
            }
        });

        table.on('tool(dateTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    util.sendAjax({
                        type: 'POST',
                        url: '#(ctxPath)/app/news/delete',
                        data: {id: data.id},
                        loadFlag: true,
                        success: function (data) {
                            layer.close(index);
                            reloadTable($('#name').val());
                        },
                        unSuccess: function (data) {
                            layer.close(index);
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                pop_show('编辑新闻', '#(ctxPath)/app/news/update?id=' + data.id, '1200', '750', function () {
                    reloadTable($('#title').val());
                });
            }
        });

        $("#add").click(function () {
            pop_show('添加新闻', '#(ctxPath)/app/news/add', '1200', '700', function () {
                reloadTable($('#name').val(), $('#des').val());
            });
        });

        form.on('submit(search)', function (data) {
            reloadTable(data.field.title, data.field.createUserID, data.field.lastUpdateUserID
                , cTime);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        reloadTable = function (title, createUserID, lastUpdateUserID, ctime, atime) {
            //alert(ctime+atime);
            table.reload('dateTable', {
                url: '#(ctxPath)/app/news/tableData'
                , where: {
                    title: title, createUserID: createUserID, lastUpdateUserID: lastUpdateUserID,
                    ctime: ctime
                } //设定异步数据接口的额外参数
            });
        };
    });
</script>
#end

#define content()
<div class="layui-fluid">
    <form id="searchForm" class="layui-form x-center" action="">
        <div class="layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" placeholder="标题名称" class="layui-input"/>
                </div>
                <label class="layui-form-label">创建用户</label>
                <div class="layui-input-inline">
                    <input type="text" id="createUserID" name="createUserID" placeholder="用户名称" class="layui-input"/>
                </div>
                <label class="layui-form-label">更新用户</label>
                <div class="layui-input-inline">
                    <input type="text" id="lastUpdateUserID" name="lastUpdateUserID" placeholder="用户名称"
                           class="layui-input"/>
                </div>
                <label class="layui-form-label">创建日期</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="createTime" name="createTime" placeholder=" - " type="text">
                </div>
                <div class="layui-input-inline" style="width : 80px">
                    <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>
    <hr>
    <div class="layui-row">
        <div class="layui-btn-group">
            #shiroHasPermission('/app/news/add')
            <button id="add" class="layui-btn layui-btn-small">新建新闻</button>
            #end
        </div>
        <table id="dateTable" lay-filter="dateTable"></table>
    </div>
</div>

<script type="text/html" id="barOption">
    #shiroHasPermission('/app/news/update')
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    #end

    #shiroHasPermission('/app/news/delete')
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    #end
</script>
#end